<template>
	<view class="line-box pb05" :style="[lineBoxStyle]" >
        <view class="pt10" v-if="item.params.mode=='one'">
            <view class="relative wlkflex bgw br04 mb20 overHidden" :style="[lineStyle]" @click="jump('/pages/line/detail?id='+line.id)" v-for="(line,index) in item.data.lines" :key="index">
                <view class="one-img">
                    <image class="wd100 hg100" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                </view>
                <view class="one-info wlkflex align-content-between wrap">
                    <view class="wd100">
                        <view class="u-line-2 title">{{line.title}}</view>
                        <view class="u-line-1 desc">{{line.desc}}</view>
                        <view class="wlkflex tags">
                            <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<2">
                                <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                            </view>
                        </view>
                    </view>
                    <view class="wd100 price-info wlkflex justify-between" >
                        <view v-if="line.minprice>0">
                            <span>￥</span>
                            <span class="price">{{line.minprice}}</span>
                            <span class="ml05">起</span>
                        </view>
                        <view v-else>
                            <span class="col9">暂无库存</span>
                        </view>
                        <view class="sales">
                            {{line.sales}}人出游
                        </view>
                    </view>
                </view>
                <view class="line-start">
                    {{line.startcity[line.startcity.length-1].name}}出发
                </view>
            </view>
        </view>
        <view class="wlkflex justify-between wrap"  v-if="item.params.mode=='two' && item.params.styleMode!='waterfall'">
            <view class="wd50 two-box wlkflex" v-for="(line,index) in item.data.lines" :key="index">
                <view  class="two-item bgw br04 mb10 overHidden" :style="[lineStyle]" @click="jump('/pages/line/detail?id='+line.id)">
                    <view class="two-img relative">
                        <image class="wd100 hg100 block" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                        <view class="line-start">
                            {{line.startcity[line.startcity.length-1].name}}出发
                        </view>
                    </view>
                    <view class="two-info wlkflex align-content-between wrap">
                        <view class="wd100">
                            <view class="u-line-2 title">{{line.title}}</view>
                            <view class="u-line-1 desc">{{line.desc}}</view>
                            <view class="wlkflex tags">
                                <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<2">
                                    <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                                </view>
                            </view>
                        </view>
                        <view class="wd100 price-info">
                            <block v-if="line.minprice>0">
                                <span>￥</span>
                                <span class="price">{{line.minprice}}</span>
                                <span class="ml05">起</span>
                            </block>
                            <block v-else>
                                <span class="col9">暂无库存</span>
                            </block>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="waterfall" v-else-if="item.params.mode=='two' && item.params.styleMode=='waterfall'">
            <helang-waterfall-list
                    :status="waterfall.status"
                    :list="item.data.lines"
                    :reset="waterfall.reset"
                    type="line"
                    @click="clickFn"
                    @done="doneWaterFall"
                    ref="waterfall"
            >
            </helang-waterfall-list>
        </view>
        <view class="big-flex" v-if="item.params.mode=='big'">
            <view class="wd100 big-box wlkflex" v-for="(line,index) in item.data.lines" :key="index">
                <view  class="wd100 big-item bgw br04 overHidden"  :style="[lineStyle]" @click="jump('/pages/line/detail?id='+line.id)">
                    <view class="big-img relative">
                        <image class="wd100 hg100 block" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                        <view class="line-start">
                            {{line.startcity[line.startcity.length-1].name}}出发
                        </view>
                    </view>
                    <view class="big-info wlkflex align-content-between wrap">
                        <view class="wd100">
                            <view class="u-line-2 title">{{line.title}}</view>
                            <view class="u-line-1 desc">{{line.desc}}</view>
                            <view class="wlkflex tags">
                                <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<4">
                                    <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                                </view>
                            </view>
                        </view>
                        <view class="wd100 price-info wlkflex justify-between">
                            <view v-if="line.minprice>0">
                                <span>￥</span>
                                <span class="price">{{line.minprice}}</span>
                                <span class="ml05">起</span>
                            </view>
                            <view v-else>
                                <span class="col9">暂无库存</span>
                            </view>
                            <view class="sales">
                                {{line.sales}}人出游
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="slide-flex pt10 pb10" v-if="item.params.mode=='slide'">
            <u-scroll-list :indicator="false">
                <view class="slide-box bgw br04" :style="[lineStyle]" v-for="(line,index) in item.data.lines" :key="index" @click="jump('/pages/line/detail?id='+line.id)">
                    <view class="slide-img relative overHidden">
                        <image class="block" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                        <view class="line-start">
                            {{line.startcity[line.startcity.length-1].name}}出发
                        </view>
                    </view>
                    <view class="slide-info wlkflex align-content-between wrap">
                        <view class="wd100">
                            <view class="u-line-2 title">{{line.title}}</view>
                        </view>
                        <view class="wd100 price-info">
                            <block v-if="line.minprice>0">
                                <span>￥</span>
                                <span class="price">{{line.minprice}}</span>
                                <span class="ml05">起</span>
                            </block>
                            <block v-else>
                                <span class="col9">暂无库存</span>
                            </block>
                        </view>
                    </view>
                </view>
            </u-scroll-list>
        </view>
	</view>
</template>

<script>
    import { toUrl } from '@/wlkutils/tools';
    import helangWaterfallList from '../wlk-waterfall/waterfall-list';
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		name:"wlk-line",
		data() {
			return {
                // 瀑布流组件相关
                waterfall:{
                    status:"success",
                    reset:false,
                },
                lineBoxStyle:{},
                lineStyle:{},
			};
		},
        computed: {
            ...mapGetters(['themeColor'])
        },
        components: {
            helangWaterfallList
        },
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            }
        },
        created:function(e){
            this.setLineStyle();
        },
        mounted() {

        },
        methods: {
            doneWaterFall(height){
                if(height>0){
                    this.$emit('doneWaterFall',height)
                }
            },
            clickFn(data, index, tag) {
                this.jump('/pages/line/detail?id='+data.id)
            },
            setLineStyle(){
                this.lineBoxStyle.backgroundColor = this.item.style.bgColor;
                this.lineBoxStyle.padding = '0 '+uni.$u.addUnit(this.item.style.pageMargin/2, 'rpx');
                if(this.item.params.styleMode=='card'){
                    this.lineStyle.boxShadow = '0 2px 4px rgba(0,0,0,.06)';
                }
            },
            jump(path){
                toUrl(path);
            }
        }
	}
</script>

<style lang="scss">
    .line-box{
        .one-img{
            image{
                width: 308rpx;
                height: 308rpx;
                display: block;
            }
        }
        .one-info{
            height: 270rpx;
            width: 400rpx;
            padding: 0 20rpx;
            pointer-events: none;
            .title{
                font-weight: bold;
                font-size: $font-lt;
            }
            .desc{
                font-size: $font-sm;
                color: $-color-muted;
                margin-top: 4rpx;
            }
            .tags{
                margin-top: 8rpx;
                .tags-item{
                    margin-right: 10rpx;
                }
            }
            .price-info{
                font-size: $font-base;
                color: $-tour-price-color;
                .price{
                    font-size: $font-max;
                }
                .sales{
                    font-size: $font-sm;
                    color: $-color-muted;
                }
            }
        }
        .line-start{
            position: absolute;
            left: 0;
            top: 0;
            font-size: $font-sm;
            background-color: rgba(0,0,0,0.18);
            border-radius:4px 0 4px 0;
            padding: 6rpx 10rpx;
            color: #FFFFFF;
        }
        .two-box{
            height: 536rpx;
            .two-item{
                width: 95%;
                height: 96.5%;
                overflow: hidden;
                margin: 0 auto;
                .two-img{
                    height: 48%;
                }
                .two-info{
                    height: 52%;
                    padding: 20rpx 20rpx 20rpx 20rpx;
                    pointer-events: none;
                    .title{
                        font-weight: bold;
                        font-size: $font-lt;
                    }
                    .desc{
                        font-size: $font-sm;
                        color: $-color-muted;
                        margin-top: 4rpx;
                    }
                    .tags{
                        margin-top: 10rpx;
                        .tags-item{
                            margin-right: 10rpx;
                        }
                    }
                    .price-info{
                        font-size: $font-base;
                        color: $-tour-price-color;
                        .price{
                            font-size: $font-max;
                        }
                    }
                }
            }
        }
        .big-flex{
            .big-box{
                height: 771rpx;
                .big-item{
                    height: 97%;
                    .big-img{
                        height: 65%;
                    }
                    .big-info{
                        height: 35%;
                        padding: 20rpx 20rpx 10rpx 20rpx;
                        pointer-events: none;
                        .title{
                            font-weight: bold;
                            font-size: $font-lt;
                        }
                        .desc{
                            font-size: $font-sm;
                            color: $-color-muted;
                            margin-top: 4rpx;
                        }
                        .tags{
                            margin-top: 10rpx;
                            .tags-item{
                                margin-right: 10rpx;
                            }
                        }
                        .price-info{
                            font-size: $font-base;
                            color: $-tour-price-color;
                            .price{
                                font-size: $font-max;
                            }
                            .sales{
                                font-size: $font-sm;
                                color: $-color-muted;
                            }
                        }
                    }
                }
            }
        }
        .slide-flex{
            .slide-box{
                height: 455rpx;
                margin-right: 20rpx;
                .slide-img{
                    width: 263rpx;
                    height: 65%;
                    border-radius: 4px 4px 0 0;
                    image{
                        height: 100%;
                        width: 263rpx;
                    }
                }
                .slide-info{
                    width: 263rpx;
                    height: 35%;
                    padding: 10rpx 20rpx 10rpx 20rpx;
                    pointer-events: none;
                    .title{
                        font-weight: bold;
                        font-size: $font-lt;
                    }
                    .price-info{
                        font-size: $font-base;
                        color: $-tour-price-color;
                        .price{
                            font-size: $font-lg;
                        }
                    }
                }
            }
        }
    }
</style>